<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div>
     <!-- 这个头部 -->
     <div style="background: #ccc;margin-left: 0px; width: 500px;">
          <h1>头部信息</h1>
          <a href="#center">查看中间的图片</a>
          <p><em style="color: green;">top</em>&nbsp;&nbsp;<strong>上，向上</strong></p>
          <p><em style="color: red;">bottom</em>&nbsp;&nbsp;<strong>下，底部</strong></p>
          <p><em style="color: #003;">left</em>&nbsp;&nbsp;<strong>左</strong></p>
          <p><em style="color: #000;">right</em>&nbsp;&nbsp;<strong>右</strong></p>
          <p><em style="color: #000;">style</em>&nbsp;&nbsp;<strong>样式</strong></p>
          <p><em style="color: #999;">float</em>&nbsp;&nbsp;<strong>浮动</strong></p>
          <p><em style="color: #000;">margin</em>&nbsp;&nbsp;<strong>边缘</strong></p>
          <p><em style="color: #000;">padding</em>&nbsp;&nbsp;<strong>填充</strong></p>
     </div>
     <hr/>
     <!-- 这是中间 -->
     <div style="background: red;margin: auto;width: 500px;">
        <h2>这是中间</h2>
         <a href="#bottom">
             <img id="center" width="500px" src="https://cdn.mphot.cn/banner/banner_1.jpg" title="banner">
         </a>

     </div>
     <hr/>
     <!-- 这是底部 -->
     <div style="background: green; float:right; width: 500px;">
        <h2> this is bottom</h2>
        <img width="200px" src="https://cdn.mphot.cn/banner/banner_1.jpg" alt="banner"/>

     </div>

</div>
</body>
</html>